<template>
	<view class="card_audio">
		<!-- 播放全部 -->
		<view class="EarGrinding-item EarGrinding-top flex align-center justify-between bg-white padding-sm radius">
			<view @click="allRunFn" class="EarGrinding-content flex align-center">
				<text style="margin-right: 20upx;" class=" text-lg text-orange"
					:class="[run.status ? 'cuIcon-stop' : 'cuIcon-video']"></text>
				<text>播放全部</text>
			</view>
			<view class="text-grey text-sm">(共{{list.length}}首)</view>
		</view>
		<!-- 播放列表 -->
		<view @click="runFn(item)" v-if="list.length>0" v-for="(item,index) in list" :key="item.id"
			class="EarGrinding-item margin flex align-center justify-between bg-white padding-sm radius">
			<view style="overflow: visible;" class="EarGrinding-content flex align-center text-cut">
				<text class="margin-right">{{index+1}}.</text>
				<view @click.stop="collectFn(item)" class="cu-avatar round  "
					style="margin-right: 20upx;min-width: 64upx;overflow: visible;"
					:style="[{ backgroundImage:'url(' + item.cover + ')' }]">
					<view  class="cu-tag badge"
						:class="item.collected ? 'cuIcon-favorfill bg-orange' : 'cuIcon-favor bg-grey'"></view>
				</view>
				<text class="text-cut text-sm">{{item.name}}</text>
			</view>
			<view class="EarGrinding-rankfill text-grey text-sm flex align-center ">
				<!-- 正在播放 -->
				<text v-if="run.id===item.id && run.status" class="text-orange margin-lr-xs">正则播放</text>
				<view class="EarGrinding-audio" v-if="run.id===item.id && run.status">
					<view class="bg-orange"></view>
					<view class="bg-orange"></view>
					<view class="bg-orange"></view>
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<Divider v-if="list.length==0" text="暂无数据"></Divider>
		<!-- 控制器 -->
		<CardControl v-else @handle="handleFn" :value="run"></CardControl>
	</view>
</template>

<script>
	import CardControl from '@/plugin/card_control.vue';
	import Divider from './divider.vue';

	import * as EarGrindingReadApi from '@/api/EarGrindingRead/index.js'
   
    import AudioControls from '@/utils/audio_controls.js';
	export default {
		props: {
			list: Array,
			type: String
		},
		mixins:[AudioControls],
		components: {
			CardControl,
			Divider
		},
		data() {
			return {
				run: {
					status: false, //播放状态
					audioFile:null
				}
			}
		},
		methods: {
			// 页面销毁
			hideAndUnloadFn(){
				this.ac && this.ac.stop();
			},
			// 播放
			async audioFn(){
				let {status,audioFile,id} =this.run;
				if(status){
					if(!audioFile){
						this.handleFn('right');
						return false;
					}
					this.acCreateControlsFn(audioFile,{autoplay:true});
					await EarGrindingReadApi.play(id);
				}else{
					this.ac && this.ac.stop();
				}
			},
			// 控制器事件
			handleFn(type) {
				if (type == 'left') {
					if (this.run.id || this.run.id == 0) {
						let index = this.list.findIndex(item=>item.id == this.run.id);
						index -= 1;
						if (index <= -1) index = 0;
						this.runFn(this.list[index]);
					} else {
						this.runFn(this.list[0]);
					}
					return false;
				}
				if (type == 'center') {
					this.allRunFn();
					return false;
				}
				if (type == 'right') {
					if (this.run.id || this.run.id == 0) {
						let index = this.list.findIndex(item=>item.id == this.run.id);
						index += 1;
						if (index >= this.list.length) index = 0;
						this.runFn(this.list[index]);
					} else {
						this.runFn(this.list[0]);
					}
					return false;
				}
			},
			//收藏
			async collectFn(item) {
				let res = await EarGrindingReadApi.collect(item.id, this.type != 'EarGrinding-star');
				if (res.code === 0) {
					let title = this.type != 'EarGrinding-star' ? '已添加收藏' : '已取消收藏';
					
					this.$emit('refresh');
					uni.showToast({
						title,
					})
				}
			},
			// 播放全部
			allRunFn() {
				if (this.list.length == 0) return false;
				let {
					id,
					status
				} = this.run;
				if (id || id === 0) {
					this.$set(this.run, 'status', !status);
				} else {
					this.runFn(this.list[0]);
				}
			},
			// 选中播放
			runFn(item) {
				if (item.id == this.run.id) return false;
				this.run = {
					status: true,
					...item
				}
			}
		},
		watch:{
			list:{
				handler(newVal){
				  if(newVal && newVal.length>0){
					 let {status,audioFile}=this.run;
					 if(!status && !audioFile){
					  this.run = {
					  	status: false,
					  	...this.list[0]
					  }
					 }
				  }
				},
				immediate:true,
				deep:true
			},
			run:{
				handler(newVal,oldVal){
					this.audioFn()
				},
				immediate:true,
				deep:true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_audio {
		.EarGrinding-top {
			position: sticky;
			top: -2upx;
			z-index: 100;
		}

		.EarGrinding-item {
			.EarGrinding-content {
				max-width: 50vw;


				text {
					font-size: 30upx !important;
				}

			}

			.EarGrinding-rankfill {
				margin-left: 20upx;

				.EarGrinding-star {
					width: 40upx;
					height: 40upx;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.EarGrinding-audio {
					height: 30upx;
					width: 40upx;
					display: flex;
					align-items: flex-end;
					justify-content: center;

					>view {
						width: 6upx;
						height: 20upx;
						margin: 0 2upx;
					}

					>view:first-child {
						animation: volumeAnimation 1s infinite alternate;
					}

					>view:nth-child(2) {
						animation: volumeAnimation1 1s infinite alternate;
					}

					>view:last-child {
						animation: volumeAnimation2 1s infinite alternate;

					}
				}
			}
		}


	}

	@keyframes volumeAnimation {
		0% {
			height: 10upx;
			/* 音量最低 */
		}

		100% {
			height: 30upx;
			/* 音量最高 */
		}
	}

	@keyframes volumeAnimation1 {
		0% {
			height: 30upx;
			/* 音量最低 */
		}

		100% {
			height: 0upx;
			/* 音量最高 */
		}
	}

	@keyframes volumeAnimation2 {
		0% {
			height: 5upx;
			/* 音量最低 */
		}

		100% {
			height: 25upx;
			/* 音量最高 */
		}
	}
</style>